<template>
  <div class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
      <x-header class="my-header" title="用户注册" :left-options="{showBack: false}"></x-header>
      <div style="height: 100%;margin-top: 40px">
        <img src="../assets/logo.png"class="center"/>
        <div class="box">
          <checker v-model="type" radio-required default-item-class="demo1-item" selected-item-class="demo1-item-selected">
            <checker-item value="nurse">护士</checker-item>
            <checker-item value="customer">用户</checker-item>
          </checker>
        </div>
        <group class="weui-cells_form">
          <x-input title="手机号码" mask="99999999999" v-model="phoneNum" :max="13" is-type="china-mobile"></x-input>
          <x-input title="验证码 " class="weui-vcode" v-model="verficationCode">
            <x-button v-if="!isSend" slot="right" type="primary" mini @click.native="sendCode()">发送验证码</x-button>
            <x-button :disabled="true" v-if="isSend" slot="right" type="primary" mini @click="sendCode()" style="width: 99px">
              <countdown v-model="time" :start="isSend" @on-finish="finished()"></countdown>秒重发
            </x-button>
          </x-input>
        </group>
        <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask text="登录成功" position="bottom"></toast>
        <toast v-model="wrong" type="text" :time="2000" is-show-mask text="验证码错误" position="bottom"></toast>
        <toast v-model="isLogin" type="text" :time="1500" is-show-mask text="未登录或身份验证过期" position="bottom"></toast>
        <toast v-model="isRegister" type="text" :time="1500" is-show-mask text="该手机未注册请再次输入注册" position="bottom"></toast>
        <box gap="10px 10px">
          <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="login()">注册</x-button>
        </box>
      </div>
    </view-box>
  </div>
</template>

<script>
  import { Checker, CheckerItem,Radio,Tabbar, TabbarItem,Drawer,ViewBox,Toast,Countdown, Box, XInput, Group, XButton, Cell,XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem } from 'vux'
  export default {
    data(){
      return{
        loginData:'',       //登录验证失败后跳转至登录界面时传的data
        isLogin:false,        //显示未登录提示框
        isRegister:false,       //是否注册
        showMenu: false,
        time:60,
        phoneNum:'',
        verficationCode:'',
        isSend:false,
        showPositionValue:false,
        wrong:false,
        isWeixin:false,
        type:'',
        types:[{
        key: 'customer',
        value: '用户'
      }, {
        key: 'nurse',
        value: '护士'
      }]
      }
    },
    mounted(){
      this.loginData=this.$route.query
      this.type=this.$route.query.type
    },
    methods:{
      //发送验证码
      sendCode(){
        let data={
          tel:this.phoneNum
        }
        this.Ajax('post','/javaapi/user/captcha',data,(res)=>{
          if(res.body.sc=='200'){
            this.isSend=true;
          }
        })
      },
      login(){          //登录函数
        let data={
          tel:this.phoneNum,
          captcha:this.verficationCode,
          uid:this.loginData.uid
        }
        switch (this.type){
          case 'nurse':
            this.Ajax('post','/javaapi/user/nurse',data,(res)=>{
              if(res.uid){       //成功返回
                this.showPositionValue=true
                let data=res;
                //判断是从哪个页面调过来的再跳转回去
                setTimeout(()=>{
                  this.$router.push({
                    path:'page/download_nurse',
                  });
                },1000)
              }else if(res.body.sc=='22001'){   //登录失败
                this.wrong=true
              }
            })
                break;
          case 'customer':
            this.Ajax('post','/javaapi/user/consumer',data,(res)=>{
              if(res.uid){       //成功返回
                this.showPositionValue=true
                let data=res;
                //判断是从哪个页面调过来的再跳转回去
                setTimeout(()=>{
                  this.$router.push({
                    path:'page/download',
                  });
                },1000)
              }else if(res.body.sc=='22001'){   //登录失败
                this.wrong=true
              }
            })
            break;
        }

      },
      finished(){
        this.isSend=false
        this.time=60
      }
    },
    components: {
      Checker, CheckerItem,Tabbar, TabbarItem,Drawer,ViewBox,Toast,Radio,
      Countdown,
      XButton,
      Box,
      XInput,
      Group,
      Cell,
      XHeader,
      Actionsheet,
      ButtonTab,
      ButtonTabItem
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .box {
    padding: 20px 15px;
    text-align: center;
  }
  .demo1-item {
    border: 1px solid #ececec;
    padding: 5px 15px;
  }
  .demo1-item-selected {
    border: 1px solid green;
    background-color: darkgray;
  }
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .center {
    display: block;
    margin: 0 auto;
    text-align: center;

    border-radius: 10px 10px 10px 10px;
    height: 75px;
    width: 75px;
  }
  .weui-cells_form{
    padding-top: 20px;
    width: 95%;
    margin: 0 auto;
  }
  .weui-cell{
    height: 30px;
  }
  #tabbar{
    position: fixed;
  }
</style>
